<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position:relative;
            width: 600px;
            height: 400px;
            background-color: aqua;
            margin: auto;
        }
        .content{
            width: 100%;
            height: 100px;
            color:rgb(166, 131, 143);
            position: absolute;
            background-color: burlywood;
            bottom: 0;
          text-align:left;

        
    
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">
            <li>哔哩哔哩小年YEAR</li>
            <li>哔哩哔哩小年YEAR</li>
            <li>哔哩哔哩小年YEAR</li>
            <li>哔哩哔哩小年YEAR</li>
            <li>哔哩哔哩小年YEAR</li>
            <li>哔哩哔哩小年YEAR</li>
            <li>哔哩哔哩小年YEAR</li>
        </div>
    </div>
   <script>
    const sliderData = [
      { url: '../../../../images/webapi/第一单元/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: '../../../../images/webapi/第一单元/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: '../../../../images/webapi/第一单元/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: '../../../../images/webapi/第一单元/slider04.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(139, 98, 66)' },
      { url: '../../../../images/webapi/第一单元/slider05.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(67, 90, 92)' },
      { url: '../../../../images/webapi/第一单元/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: '../../../../images/webapi/第一单元/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: '../../../../images/webapi/第一单元/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]

   </script>
    
</body>
</html>